<template>
  <div class="sea_right flexC">
    <div class="flex1 right_top flexC">
      <p class="colorF textR">
        <span>监管预警</span>
        <img class="verticM" style="height: 1.125rem;padding-left: 0.5rem;margin-right: 1.625rem;" src="../../assets/img/data/18.png" alt="" />
      </p>
      <ul class="flex1 flex JustifyContentSA AlignItemsC textC">
        <li class="cursor" @click="activityRecord = true">
          <p class="Acens font_s36" style="color: #51F445;">{{ creditForm.gyxy1 }}</p>
          <p class="font_s16 Medium" style="color: #ABC7FF;">活动备案</p>
        </li>
        <li class="cursor" @click="letterPublicSentiment = true">
          <p class="Acens font_s36" style="color: #FFE825;">{{ creditForm.gyxy2 }}</p>
          <p class="font_s16 Medium" style="color: #ABC7FF;">信访舆情</p>
        </li>
        <li class="cursor" @click="violationsOfSocialOrganizations = true">
          <p class="Acens font_s36" style="color: #ff3737;">{{ creditForm.gyxy3 }}</p>
          <p class="font_s16 Medium" style="color: #ABC7FF;">社会组织<br />违规情况</p>
        </li>
        <li class="cursor" @click="illegalOrganizations = true">
          <p class="Acens font_s36" style="color: #ff3737;">{{ creditForm.gyxy4 }}</p>
          <p class="font_s16 Medium" style="color: #ABC7FF;">非法社会<br />组织举报</p>
        </li>
      </ul>
      <ul class="flex1 flex JustifyContentSA AlignItemsC textC">
        <li class="cursor" @click="memberChangedThreeMonths = true">
          <p class="Acens font_s36" style="color: #ffe825;">4</p>
          <p class="font_s16 Medium" style="color: #ABC7FF;">社团3月<br />内需换届</p>
        </li>
        <li class="cursor" @click="memberChanged = true">
          <p class="Acens font_s36" style="color: #51f445;">25</p>
          <p class="font_s16 Medium" style="color: #ABC7FF;">当年<br />已换届</p>
        </li>
        <li class="cursor" @click="memberChangedDelay = true">
          <p class="Acens font_s36" style="color: #51f445;">13</p>
          <p class="font_s16 Medium" style="color: #ABC7FF;">换届<br />已延期
          </p>
        </li>
        <li class="cursor" @click="certificateOverdue = true">
          <p class="Acens font_s36" style="color: #ff3737;">{{ creditForm.gyxy8 }}</p>
          <p class="font_s16 Medium" style="color: #ABC7FF;">社团证书<br />已过期</p>
        </li>
      </ul>
      <ul class="flex1 flex JustifyContentSA AlignItemsC textC">
        <li class="cursor" @click="privateCertificateChangedThreeMonths = true">
          <p class="Acens font_s36" style="color:#ffe825;">97</p>
          <p class="font_s16 Medium" style="color: #ABC7FF;">民非3月<br />内需换证</p>
        </li>
        <li class="cursor" @click="privateCertificateChanged = true">
          <p class="Acens font_s36" style="color: #51f445;">231</p>
          <p class="font_s16 Medium" style="color: #ABC7FF;">当年<br />已换证
          </p>
        </li>
        <li class="cursor" @click="privateCertificateOverdue = true">
          <p class="Acens font_s36" style="color: #ff3737;">{{ creditForm.gyxy11 }}</p>
          <p class="font_s16 Medium" style="color: #ABC7FF;">民非证书<br />已过期</p>
        </li>
        <li class="cursor" @click="foundationChangedThreeMonths = true">
          <p class="Acens font_s36" style="color: #ffe825;">0</p>
          <p class="font_s16 Medium" style="color: #ABC7FF;">基金会3月<br />内需换证</p>
        </li>
      </ul>
    </div>
    <div class="flex1 right_bottom flexC">
      <div class="flex JustifyContentSB" style="padding-left: 1rem ;">
        <p class="flex colorF textR">
          <img class="verticM" style="height: 1.125rem;padding: 0 0.825rem 0 1.625rem;" src="../../assets/img/data/18.png" alt="" />
          <span>2017</span>/
          <span>2018</span>
        </p>
        <p class="colorF textR">
          <span>年检情况</span>
          <img class="verticM" style="height: 1.125rem;padding-left: 0.5rem;margin-right: 1.625rem;" src="../../assets/img/data/18.png" alt="" />
        </p>
      </div>
      <div class="flex flex3">
        <div class="flexC JustifyContentC AlignItemsC">
          <div class="flex Regular font_s18 LH3R textbox">
            <p style="color: #A9B2F7;">
              实际年检<br />未年检<br />年检率
            </p>
            <p style="color: #FEFEFE;">
              1893<br />257<br />88%
            </p>
          </div>
        </div>
        <div id="echarts_3"></div>
      </div>
      <ul class="flex2 Regular flex textC JustifyContentSA textbox2">
        <li>
          <p class="font_s30" style="color: #ffe825;">225</p>
          <p class="colorF">当年未参检</p>
        </li>
        <li>
          <p class="font_s30" style="color: #f68852;">228</p>
          <p class="colorF">连续两年及以上未参检</p>
        </li>
        <li>
          <p class="font_s30" style="color: #f68852;">141</p>
          <p class="colorF">名存实亡</p>
        </li>
      </ul>
    </div>
    <!-- 组件调用 -->
    <ModalPolygon v-if="letterPublicSentiment" @hidden="hiddenPolygon(letterPublicSentiment)" title="信访舆情">
      <LetterPublicSentiment></LetterPublicSentiment>
    </ModalPolygon>
    <ModalPolygon v-if="violationsOfSocialOrganizations" @hidden="hiddenPolygon(violationsOfSocialOrganizations)" title="社会组织违规情况">
      <ViolationsOfSocialOrganizations></ViolationsOfSocialOrganizations>
    </ModalPolygon>
    <ModalPolygon v-if="certificateOverdue" @hidden="hiddenPolygon(certificateOverdue)" title="社团证书已过期">
      <CertificateOverdue></CertificateOverdue>
    </ModalPolygon>
    <ModalPolygon v-if="memberChangedThreeMonths" @hidden="hiddenPolygon(memberChangedThreeMonths)" title="社团三月内需换届">
      <MemberChangedThreeMonths></MemberChangedThreeMonths>
    </ModalPolygon>
    <ModalPolygon v-if="memberChanged" @hidden="hiddenPolygon(memberChanged)" title="社团当年已换届">
      <MemberChanged></MemberChanged>
    </ModalPolygon>
    <ModalPolygon v-if="memberChangedDelay" @hidden="hiddenPolygon(memberChangedDelay)" title="社团当年已延期">
      <MemberChangedDelay></MemberChangedDelay>
    </ModalPolygon>
    <ModalPolygon v-if="privateCertificateChangedThreeMonths" @hidden="hiddenPolygon(privateCertificateChangedThreeMonths)" title="民非三月内需换证">
      <PrivateCertificateChangedThreeMonths></PrivateCertificateChangedThreeMonths>
    </ModalPolygon>
    <ModalPolygon v-if="privateCertificateChanged" @hidden="hiddenPolygon(privateCertificateChanged)" title="民非当年已换证">
      <PrivateCertificateChanged></PrivateCertificateChanged>
    </ModalPolygon>
    <ModalPolygon v-if="privateCertificateOverdue" @hidden="hiddenPolygon(privateCertificateOverdue)" title="民非当年已换证">
      <PrivateCertificateOverdue></PrivateCertificateOverdue>
    </ModalPolygon>
    <ModalPolygon v-if="foundationChangedThreeMonths" @hidden="hiddenPolygon(foundationChangedThreeMonths)" title="民非当年已换证">
      <FoundationChangedThreeMonths></FoundationChangedThreeMonths>
    </ModalPolygon>
    <ModalPolygon v-if="activityRecord" @hidden="hiddenPolygon(activityRecord)" title="活动备案">
      <ActivityRecord></ActivityRecord>
    </ModalPolygon>
    <ModalPolygon v-if="illegalOrganizations" @hidden="hiddenPolygon(illegalOrganizations)" title="非法社会组织举报">
      <IllegalOrganizations></IllegalOrganizations>
    </ModalPolygon>
  </div>
</template>
<script>
import ModalPolygon from '@/components/ModalPolygon.vue'
import LetterPublicSentiment from '../comprehensive/right/LetterPublicSentiment.vue'
import ViolationsOfSocialOrganizations from '../comprehensive/right/ViolationsOfSocialOrganizations.vue'
import CertificateOverdue from '../comprehensive/right/CertificateOverdue.vue'
import MemberChangedThreeMonths from './right/MemberChangedThreeMonths.vue'
import MemberChanged from './right/MemberChanged.vue'
import MemberChangedDelay from './right/MemberChangedDelay.vue'
import PrivateCertificateChangedThreeMonths from './right/PrivateCertificateChangedThreeMonths.vue'
import PrivateCertificateChanged from './right/PrivateCertificateChanged.vue'
import PrivateCertificateOverdue from './right/PrivateCertificateOverdue.vue'
import FoundationChangedThreeMonths from './right/FoundationChangedThreeMonths.vue'
import ActivityRecord from './right/ActivityRecord.vue'
import IllegalOrganizations from './right/IllegalOrganizations.vue'

export default {
  name: 'SeaRight',
  components: {
    ModalPolygon,
    LetterPublicSentiment,
    ViolationsOfSocialOrganizations,
    CertificateOverdue,
    MemberChangedThreeMonths,
    MemberChanged,
    MemberChangedDelay,
    PrivateCertificateChangedThreeMonths,
    PrivateCertificateChanged,
    PrivateCertificateOverdue,
    FoundationChangedThreeMonths,
    ActivityRecord,
    IllegalOrganizations
  },
  data () {
    return {
      total: 120,

      activityRecord: false,
      letterPublicSentiment: false,
      violationsOfSocialOrganizations: false,
      illegalOrganizations: false,
      memberChangedThreeMonths: false,
      memberChanged: false,
      memberChangedDelay: false,
      certificateOverdue: false,
      privateCertificateChangedThreeMonths: false,
      privateCertificateChanged: false,
      privateCertificateOverdue: false,
      foundationChangedThreeMonths: false,
      creditForm: {
        gyxy1: 0,
        gyxy2: 0,
        gyxy3: 0,
        gyxy4: 0,
        gyxy5: 0,
        gyxy6: 0,
        gyxy7: 0,
        gyxy8: 0,
        gyxy9: 0,
        gyxy10: 0,
        gyxy11: 0,
        gyxy12: 0
      }
    }
  },
  mounted () {
    this.echarts()
    setInterval(() => {
      this.creditForm.gyxy1 = 0
      this.creditForm.gyxy2 = 0
      this.creditForm.gyxy3 = 0
      this.creditForm.gyxy4 = 0
      this.creditForm.gyxy5 = 0
      this.creditForm.gyxy6 = 0
      this.creditForm.gyxy7 = 0
      this.creditForm.gyxy8 = 0
      this.creditForm.gyxy9 = 0
      this.creditForm.gyxy10 = 0
      this.creditForm.gyxy11 = 0
      this.creditForm.gyxy12 = 0

      var creditInterval1 = null
      var creditInterval2 = null
      var creditInterval3 = null
      var creditInterval4 = null
      var creditInterval5 = null
      var creditInterval6 = null
      var creditInterval7 = null
      var creditInterval8 = null
      var creditInterval9 = null
      var creditInterval10 = null
      var creditInterval11 = null
      var creditInterval12 = null

      creditInterval1 = setInterval(() => {
        if (this.creditForm.gyxy1 >= 4) {
          this.creditForm.gyxy1 = 4
          clearInterval(creditInterval1)
        } else {
          this.creditForm.gyxy1 = parseInt(this.creditForm.gyxy1 + Math.ceil(4 / 10))
        }
      }, 100)

      creditInterval2 = setInterval(() => {
        if (this.creditForm.gyxy2 >= 14) {
          this.creditForm.gyxy2 = 14
          clearInterval(creditInterval2)
        } else {
          this.creditForm.gyxy2 = parseInt(this.creditForm.gyxy2 + Math.ceil(14 / 10))
        }
      }, 100)
      creditInterval3 = setInterval(() => {
        if (this.creditForm.gyxy3 >= 1) {
          this.creditForm.gyxy3 = 1
          clearInterval(creditInterval3)
        } else {
          this.creditForm.gyxy3 = parseInt(this.creditForm.gyxy3 + Math.ceil(1 / 10))
        }
      }, 100)
      creditInterval4 = setInterval(() => {
        if (this.creditForm.gyxy4 >= 2) {
          this.creditForm.gyxy4 = 2
          clearInterval(creditInterval4)
        } else {
          this.creditForm.gyxy4 = parseInt(this.creditForm.gyxy4 + Math.ceil(2 / 10))
        }
      }, 100)

      creditInterval5 = setInterval(() => {
        if (this.creditForm.gyxy5 >= 5) {
          this.creditForm.gyxy5 = 5
          clearInterval(creditInterval5)
        } else {
          this.creditForm.gyxy5 = parseInt(this.creditForm.gyxy5 + Math.ceil(5 / 10))
        }
      }, 100)
      creditInterval6 = setInterval(() => {
        if (this.creditForm.gyxy6 >= 25) {
          this.creditForm.gyxy6 = 25
          clearInterval(creditInterval6)
        } else {
          this.creditForm.gyxy6 = parseInt(this.creditForm.gyxy6 + Math.ceil(25 / 10))
        }
      }, 100)
      creditInterval7 = setInterval(() => {
        if (this.creditForm.gyxy7 >= 13) {
          this.creditForm.gyxy7 = 13
          clearInterval(creditInterval7)
        } else {
          this.creditForm.gyxy7 = parseInt(this.creditForm.gyxy7 + Math.ceil(13 / 10))
        }
      }, 100)
      creditInterval8 = setInterval(() => {
        if (this.creditForm.gyxy8 >= 74) {
          this.creditForm.gyxy8 = 74
          clearInterval(creditInterval8)
        } else {
          this.creditForm.gyxy8 = parseInt(this.creditForm.gyxy8 + Math.ceil(74 / 10))
        }
      }, 100)
      creditInterval9 = setInterval(() => {
        if (this.creditForm.gyxy9 >= 97) {
          this.creditForm.gyxy9 = 97
          clearInterval(creditInterval9)
        } else {
          this.creditForm.gyxy9 = parseInt(this.creditForm.gyxy9 + Math.ceil(97 / 10))
        }
      }, 100)

      creditInterval10 = setInterval(() => {
        if (this.creditForm.gyxy10 >= 231) {
          this.creditForm.gyxy10 = 231
          clearInterval(creditInterval10)
        } else {
          this.creditForm.gyxy10 = parseInt(this.creditForm.gyxy10 + Math.ceil(231 / 10))
        }
      }, 100)

      creditInterval11 = setInterval(() => {
        if (this.creditForm.gyxy11 >= 404) {
          this.creditForm.gyxy11 = 404
          clearInterval(creditInterval11)
        } else {
          this.creditForm.gyxy11 = parseInt(this.creditForm.gyxy11 + Math.ceil(404 / 10))
        }
      }, 100)

      creditInterval12 = setInterval(() => {
        if (this.creditForm.gyxy12 >= 0) {
          this.creditForm.gyxy12 = 0
          clearInterval(creditInterval12)
        } else {
          this.creditForm.gyxy12 = parseInt(this.creditForm.gyxy12 + Math.ceil(0 / 10))
        }
      }, 100)
    }, 5000)
  },

  methods: {
    hiddenPolygon (choose) {
      if (choose === this.letterPublicSentiment) {
        this.letterPublicSentiment = false
      }
      if (choose === this.violationsOfSocialOrganizations) {
        this.violationsOfSocialOrganizations = false
      }
      if (choose === this.certificateOverdue) {
        this.certificateOverdue = false
      }
      if (choose === this.memberChangedThreeMonths) {
        this.memberChangedThreeMonths = false
      }
      if (choose === this.memberChanged) {
        this.memberChanged = false
      }
      if (choose === this.memberChangedDelay) {
        this.memberChangedDelay = false
      }
      if (choose === this.privateCertificateChangedThreeMonths) {
        this.privateCertificateChangedThreeMonths = false
      }
      if (choose === this.privateCertificateChanged) {
        this.privateCertificateChanged = false
      }
      if (choose === this.privateCertificateOverdue) {
        this.privateCertificateOverdue = false
      }
      if (choose === this.foundationChangedThreeMonths) {
        this.foundationChangedThreeMonths = false
      }
      if (choose === this.activityRecord) {
        this.activityRecord = false
      }
      if (choose === this.illegalOrganizations) {
        this.illegalOrganizations = false
      }
    },
    echarts () {
      let myChart = this.$echarts.init(document.getElementById('echarts_3'))
      myChart.setOption({
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['20%', '40%'],
            center: ['50%', '50%'],
            data: [{ value: 335, name: '不合格' }, { value: 310, name: '合格' }, { value: 234, name: '基本合格' }],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.sea_right {
  position: absolute;
  right: 1rem;
  top: 25%;
  height: 73%;
  width: 25%;
  .right_top {
    padding: 1rem;
    background: url(../../assets/img/data/14.png) no-repeat;
    background-size: 100% 100%;
  }
  .right_bottom {
    padding: 1rem;
    background: url(../../assets/img/data/15.png) no-repeat;
    background-size: 100% 100%;
    .textbox {
      padding: 0 1rem;
      margin-left: 2rem;
      background: url(../../assets/img/data/25.png) no-repeat;
      background-size: 100% 100%;
    }
    .textbox2 {
      margin-left: 2rem;
      background: url(../../assets/img/data/26.png) no-repeat;
      background-size: 100% 100%;
    }
    #echarts_3 {
      width: 15rem;
      height: 13rem;
    }
  }
  .bj {
    width: 90%;
    height: 90%;
    position: absolute;
    top: 5%;
    left: 5%;
  }
}
</style>
